<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{msg}} {{studentName}}</h1>

    <!-- 通过父组件给子组件传递函数类型的props 实现，子给父传递数据 -->
    <School :getSchoolName="getSchoolName"></School>

    <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据（第一种写法，使用@或者v-on） -->
    <!-- <Student @atguigu.once="getStudentName"></Student> -->
    <Student @atguigu="getStudentName" @demo="m1"></Student>

    <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据（第二种写法，使用ref） -->
    <!-- <Student ref="student"></Student> -->
  </div>
</template>

<script>
  import Student from './components/Student.vue';
  import School from './components/School.vue';

  export default {
    name: 'App',
    components: {
      Student,
      School
    },
    data() {
      return {
        msg: '欢迎学习Vue!!!!!!!!',
        studentName: ''
      }
    },
    methods: {
      getSchoolName(name) {
        console.log("App收到了学校的名称：", name);
      },
      getStudentName(name, ...params) {
        console.log("App收到了学生的姓名：", name, params);
        this.studentName = name;
      },
      m1() {
        console.log("我是demo方法！！");
      }
    },
    // mounted() {
    //   // setTimeout(() => {
    //   //   // 绑定自定义事件
    //   //   this.$refs.student.$on('atguigu', this.getStudentName);
    //   // }, 3000);

    //   // 绑定自定义事件（一次性）
    //   this.$refs.student.$once('atguigu', this.getStudentName);
    // },
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>